<template>
    <div id="body">
        <div>
            <img :src="props.data.poster" alt="">
        </div>
        <div>
            <div>
                <span>{{ props.data.name }}</span>
                <span>{{ props.data.filmType.name }}</span>
            </div>
            <div>
                <span>观众评分</span>
                <span>{{ props.data.grade }}</span>
            </div>
            <div>
                主演:
                <template v-for="(item, index) in props.data.actors" :key="index">
                    <span> {{ item.name + ' ' }} </span>
                </template>
            </div>
            <div>
                <span>{{ props.data.nation }}</span> | <span>{{ props.data.runtime }}分钟</span>
            </div>
        </div>
        <div>
            <span>购票</span>
        </div>
    </div>
</template>

<script setup>
const props = defineProps(['data'])
// console.log(props.data);
</script>

<style scoped lang="scss">
#body {
    display: flex;
    padding: 3vw;
    padding-left: 0vw;
    margin-left: 3vw;
    border-bottom: 1px solid #EDEDED;
    align-items: center;

    & img {
        width: 66px;
        height: 100px;
    }

    &>:nth-child(2) {
        flex: 1;
        width: 0;

        margin-left: 3vw;

        &>:nth-child(3) {
            // background-color: #EDEDED;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    &>:nth-child(3) {
        &>span {
            border: 1px solid #FF5F16;
            border-radius: 4px;
            padding: 0.6vw 1vw;
        }
    }
}</style>